<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>审批</title>
</head>
<style>
	.layui-btn-red {
	    border: 1px dashed #FF0000;
	    background-color: #fff;
	    color: #555;
	}
	.layui-btn-red:hover{border-color:#FF0000;color:#333}
	.layui-legend{
		background-color:#5fb878;
		font-size:15px !important;
		width:140px;
	}
	.layui-form-item {
	    margin-bottom: 5px;
	    clear: both;
	    *zoom: 1;
	}
	.layui-form-select dl{max-height: 150px;}
	.layui-form-label{width: 180px;}
  
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
	    <div class="layui-tab-item layui-show">
			<div class="layui-card">
	          <div class="layui-card-body">
	            <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
	              <ul class="layui-tab-title">
	                <li class="layui-this"><B>表单信息</B></li>
	                <li><B>审批信息</B></li>
	              </ul>
	              <div class="layui-tab-content">
	                <div class="layui-tab-item layui-show">
						<!-- start 业务表单数据显示  put yourself data here -->
						<div class="layui-form-item" style="padding-top:25px">
				       		<div class="layui-inline">
					      		<label class="layui-form-label">采购商品名称</label>
					      		<div class="layui-input-inline">
					        		<input type="text" name="proCode" value="${modelDetail.sname }" readonly="readonly" style="border:0px" autocomplete="off" class="layui-input">
					      		</div>
					      	</div>
				       		<div class="layui-inline">
				       			<label class="layui-form-label">采购金额（元）</label>
					      		<div class="layui-input-inline">
					        		<input type="text" name="proCode" value="${modelDetail.amount }" readonly="readonly" style="border:0px" autocomplete="off" class="layui-input">
					      		</div>
				       		</div>
					    </div>
						<!-- end 业务表单数据显示  -->
	                </div>
	                <!-- 引入公共流程渲染页面   -->
	                <%@ include file="../include/flowPublic.jsp"%>
	              </div>
	            </div>
	          </div>
	        </div>
			<!-- 审批时 显示 通过/拒绝按钮   -->
			<c:if test="${'y'==processDealWith}">
			<fieldset class="layui-elem-field layui-field-title fieldset" style="text-align:center;">
				<div class="layui-form-item">
					<div class="layui-input-block">
			      		<input class="layui-btn layuiadmin-btn-admin layui-btn-normal " style="margin-top:6px;" type="button" data-type="to_pass_submit" id="to_pass_submit" value="审批通过">
			      		<input class="layui-btn layuiadmin-btn-admin layui-btn-primary " style="margin-top:6px;" type="button" data-type="to_refuse_submit" id="to_refuse_submit" value="审批终止">
			      	</div>
			    </div>
		    </fieldset>
		    </c:if>
			<!-- 审批意见  -->
    		<form class="layui-form" id="flow_process_form" style="display:none">
				<input type="hidden" name="state" id="flow_process_form_state"/>
				<input type="hidden" name="srcBizSguid" value="${modelDetail.id }" />
				<input type="hidden" name="processId" value="${modelDetail.processId }" />
				<div class="layui-form-item" style="padding-top:10px">
			      	<label class="layui-form-label" >审批结果</label>
			      	<div class="layui-input-inline">
			      		<input type="text"  style="border:0px;" readonly="readonly" class="layui-input" id="flow_process_form_state_txt">
			      	</div>
			    </div>
				<div class="layui-form-item" style="padding-top:10px">
			      	<label class="layui-form-label" >审批意见</label>
			      	<div class="layui-input-inline">
			        	<textarea name="dealIdea" placeholder="请输入审批意见" lay-verify="required" class="layui-textarea" style="width:475px;height:145px;"></textarea>
			      	</div>
			    </div>
			  	<div class="layui-form-item" style="margin-top:10px;">
			      	<label class="layui-form-label">附件</label>
			      	<div class="layui-input-block">
			      		<div class="layui-upload">
			              	<button type="button" class="layui-btn" id="upload-more">上传</button>
		              		<div class="layui-upload-list" id="upload-more-list">
		              		</div>
		            	</div> 
			      	</div>
			    </div>
			    <div class="layui-form-item layui-hide">
			      <input type="button" lay-submit lay-filter="flow_process_from_submit" id="flow_process_from_submit" value="确认">
			    </div>
			</form>
  		</div>
	</div>
</div>
  <script>
  	layui.config({
	    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
	  }).extend({
	    index: 'lib/index' //主入口模块
	  }).use(['index', 'table', 'set', 'transfer', 'upload'], function(){
	    var $ = layui.$
	    ,upload = layui.upload
	    ,table = layui.table
	    ,form = layui.form;
	    
	    upload.render({
	      elem: '#upload-more'
	      ,url: basePath + '/flowProcess/uploadAtt/'
	      ,multiple: true
	      ,accept: 'file'
	      ,acceptMime: 'application/zip,application/x-rar-compressed,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
	   	  ,before: function(obj){ //obj参数包含的信息
	   		    layer.load(); //上传loading
	   		  }
	      ,done: function(res){
	    	  //如果上传失败
	          if(res.code > 0){
	        	  layer.closeAll('loading'); //关闭loading
	        	  return layer.msg(res.msg,{icon: 7});
	          }
	          //上传完毕
	   	  	  if(res.entity != null && res.entity.length > 0){
				for(var i in res.entity){
					var askBillAtt = res.entity[i];
					var arr = askBillAtt.split("|");
					var imgSrc = "";
					var suffix = arr[0].substring(arr[0].lastIndexOf(".")+1,arr[0].length);
					if(suffix == 'jpg' || suffix == 'png'){
						imgSrc = "${fileHttpPre}/"+arr[2];
					}else{
						imgSrc = "${ctx}/resources/images/"+suffix+".jpg";
					}
	        		$('#upload-more-list').append('<div class="layui-upload-img-div" id="upload_img_'+arr[1]+'"><img src="'+imgSrc+'" title="'+ arr[0] +'" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\''+"${fileHttpPre}"+arr[2] +'\');">查看</a><a href="javascript:void(0)" onclick="del(\''+arr[1]+'\')";>删除</a></div><p>'+arr[0]+'</p><input type="hidden" value="'+askBillAtt+'" id="fileAtt_'+arr[1]+'" name="fileAtt" ></input></div> ');
				}
		  	  }
	      }
	      ,allDone: function(obj){ //当文件全部被提交后，才触发
	    	  layer.closeAll('loading'); //关闭loading
	      }
	      ,error: function(){
	    	  layer.closeAll('loading'); //关闭loading
	          //上传失败
	          layer.msg("上传失败，请稍后再试~",{icon: 7});
	        }
	    });
	    	  	
	 	// 按钮事件
	    var active = {
	    	to_pass_submit: function(){
	    	  $('#flow_process_form_state').val("1");	
	    	  $('#flow_process_form_state_txt').val("审批通过");	
	          layer.open({
	        	  type: 1
	        	  ,title: '审批通过确认'
	        	  ,content: $('#flow_process_form')
	        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
	        	  ,btn: ['确定', '取消']
	        	  ,btnAlign: 'c'
	        	  ,yes: function(index, layero){
	        		  var submitID = 'flow_process_from_submit'
	            		,submit = layero.contents().find('#'+ submitID);
	        		  //监听提交
	        		  form.on('submit('+ submitID +')', function(data){
	        			var field = data.field; //获取提交的字段
        		  		layer.load();
        		       	//提交 Ajax 成功后，静态更新表格中的数据
        		       	$.ajax({
        		           	type : 'post',
        					url : basePath + "/flowProcess/dealWith",
        		           	data: $('#flow_process_form').serialize(),
        					success:function(result){
        						if(result.success){
        							layer.closeAll('loading'); //关闭loading
        							layer.msg('处理成功~',{icon: 1});
        							//两秒后关闭当前页面
        							setTimeout(function(){
        								// 刷新首页 
        								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
        								iframe[0].contentWindow.location.reload(true);
        								top.layui.admin.closeThisTabs(); // 关闭当前标签页
        						        }, 2000);
        						}else{
        							layer.closeAll('loading'); //关闭loading
        							layer.msg(result.msg,{icon: 7});
        					  	}
        					}
        		       	});
	            	});  
	            submit.trigger('click');
	          }
	        }); 
	      },
	      to_refuse_submit: function(){
	    	  $('#flow_process_form_state').val("0");
	    	  $('#flow_process_form_state_txt').val("审批终止");
	          layer.open({
	        	  type: 1
	        	  ,title: '审批终止确认'
	        	  ,content: $('#flow_process_form')
	        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
	        	  ,btn: ['确定', '取消']
	        	  ,btnAlign: 'c'
	        	  ,yes: function(index, layero){
	        		  var submitID = 'flow_process_from_submit'
	            		,submit = layero.contents().find('#'+ submitID);
	        		  //监听提交
	        		  form.on('submit('+ submitID +')', function(data){
	        			var field = data.field; //获取提交的字段
      		  		layer.load();
      		       	//提交 Ajax 成功后，静态更新表格中的数据
      		       	$.ajax({
      		           	type : 'post',
      					url : basePath + "/flowProcess/dealWith",
      					data: $('#flow_process_form').serialize(),
      					success:function(result){
      						if(result.success){
      							layer.closeAll('loading'); //关闭loading
      							layer.msg('处理成功~',{icon: 1});
      							//两秒后关闭当前页面
      							setTimeout(function(){
      								// 刷新首页 
      								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
      								iframe[0].contentWindow.location.reload(true);
      								top.layui.admin.closeThisTabs(); // 关闭当前标签页
      						        }, 2000);
      						}else{
      							layer.closeAll('loading'); //关闭loading
      							layer.msg(result.msg,{icon: 7});
      					  	}
      					}
      		       	});
	            	});  
	            submit.trigger('click');
	          }
	        }); 
	      }
	    }  
	    // data-type事件
	    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
	      var type = $(this).data('type');
	      active[type] ? active[type].call(this) : '';
	    });
	  	
	  });
  
	//删除文件
	function del(index){
		layui.$("#fileAtt_"+index).remove();
		layui.$("#upload_img_"+index).remove();
	}

	//根据url查看文件
	function showImg(url){
		var openWin = window.open(url,'','left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
	}
	
	
  </script>
</body>
</html>

